import StandSearchProduct from '@/components/StandSearchProduct';
import { customeAppId } from '@/src/config';
import utils from '@/utils';
import { useShowLoading } from '@/utils/hooks/useShowLoading';
import { View } from '@tarojs/components';
import { useRouter } from '@tarojs/taro';
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { parseParams } from '../helper';
import styles from './index.module.scss';

const AppProductsSearch = ({ loading, dispatch, appProductList, appProductListFinished }) => {
  const isLoading = useShowLoading(loading, ['productList/fetchAppProductList']);

  const { params: { goodsSelectInfo } = {} } = useRouter();
  const baseParams = parseParams(goodsSelectInfo);

  const keywords = baseParams?.name ?? '';

  const getNextList = useCallback(({ value, sort, ...rest }) => {
    return dispatch({
      type: 'productList/fetchAppProductList',
      payload: {
        type: 4,

        ...baseParams,

        pageSize: 10,

        name: value,
        sort,
        appid: customeAppId,

        ...rest,
      },
    });
  }, []);

  return (
    <View className={styles.AppProductsSearch}>
      <StandSearchProduct
        searchProps={{
          defaultValue: keywords,
          onNext: getNextList,
        }}
        sortProps={{}}
        productProps={{
          list: appProductList,
          isFinished: appProductListFinished,
          isLoading,

          height: utils.getCalcHeight({}, 100, 100, 24),
        }}
      />
    </View>
  );
};
export default connect(({ loading, productList }) => ({
  loading,

  appProductList: productList.appProductList,
  appProductListFinished: productList.appProductListFinished,
}))(AppProductsSearch);
